<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('库位') }}：</span>
        <ElInput
          v-model="formInfo.ESLWSCode"
          class="w164 mr14"
          :placeholder="translate('请输入库位')"
        />
        <span class="color_494949 ft12 pr5">{{ translate('绑定基站') }}：</span>
        <el-select
          v-model="formInfo.BSID"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in BaseStockDatacopy"
            :key="item.BSID"
            :label="
              item.BSID === '-1'
                ? item.BSName
                : '[' + item.BSID + ']' + item.BSName
            "
            :value="item.BSID"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">{{ translate('屏幕尺寸') }}：</span>
        <el-select
          v-model="formInfo.LCDType"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in LCDData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">{{ translate('MAC地址') }}：</span>
        <ElInput
          v-model="formInfo.ESLCode"
          class="w164 mr14"
          :placeholder="translate('请输入MAC地址')"
        />
      </div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('标签类别') }}：</span>
        <el-select
          v-model="formInfo.VerNo"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in VerNoData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">{{ translate('公司') }}：</span>
        <el-select
          v-model="formInfo.UUID"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in Companylist"
            :key="item.CompanyId"
            :label="item.FullName"
            :value="item.CompanyId"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">
          {{ translate('编码/名称') }}：
        </span>
        <ElInput
          v-model="formInfo.PName"
          class="w164 mr14"
          :placeholder="translate('请输入商品编码/名称')"
        />
        <span class="color_494949 ft12 pr5">
          {{ translate('条形码') }}：
        </span>
        <ElInput
          v-model="formInfo.ESLCode2"
          class="w164 mr14"
          :placeholder="translate('条形码')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div class="pdb10">
        <el-button class="settingBtn mr10" type="primary" @click="addESLcode('2')" plain>
          {{ translate('绑定基站') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="addESLcode('1')" plain>
          {{ translate('上传图片') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="addESLImg()" plain>
          {{ translate('图片推送') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="addESLcode('5')" plain>
          {{ translate('绑定物资') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="addESLcode('6')" plain>
          {{ translate('绑定模板') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="batchFn()" plain>
          {{ translate('批量重启') }}
        </el-button>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column prop="value" type="selection" width="55" />
        <!-- <el-table-column label="序号" type="index" width="60" /> -->
        <!-- <el-table-column
          :label="translate('公司')"
          prop="CompanyName"
          show-overflow-tooltip
        /> -->
        <el-table-column
          :label="translate('MAC地址')"
          prop="ESLCode"
          show-overflow-tooltip
          width="150px"
        />
        <el-table-column :label="translate('绑定基站')" width="150px">
          <template #default="{ row }">
            <div>
              <span v-if="row.BSID" class="w130">
                {{ '[' + row.BSID + ']' }}
              </span>
              <span v-if="row.BSName">{{ row.BSName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('绑定商品')" width="150px">
          <template #default="{ row }">
            <div>
              <span v-if="row.PCode" class="w130">
                {{ '[' + row.PCode + ']' }}
              </span>
              <span v-if="row.PName">{{ row.PName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="translate('条形码')"
          prop="ESLCode2"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          :label="translate('类别')"
          prop="VerNo"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>
              {{
                row.VerNo === 1
                  ? translate('一代')
                  : row.VerNo === 2
                  ? translate('二代')
                  : translate('三代')
              }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('标签模板')" prop="ESLTypeName" />
        <el-table-column :label="translate('屏幕尺寸')" show-overflow-tooltip>
          <template #default="{ row }">
            <div>
              {{ lcdtypes(row.LCDType) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('是否低温')" show-overflow-tooltip>
          <template #default="{ row }">
            <div>
              {{ row.IsLowHeat }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="电量" prop="Field2" show-overflow-tooltip>
          <template #default="{ row }">
            <div>{{ row.InitCodeStatus === '2' ? '正常' : '其它' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="信号强度"
          prop="CompanyId"
          show-overflow-tooltip
        /> -->
        <el-table-column :label="translate('图片推送')" prop="VerNo">
          <template #default="{ row }">
            <div>
              <el-image
                fit="contain"
                :initial-index="9"
                :preview-teleported="true"
                :src="row.PathBmp + '?=' + timestamp"
                style="width: 60px; height: 60px"
                :style="
                  row.VerNo != 2 && row.PathBmp && row.LCDType === '05'
                    ? 'transform: rotate(-90deg)'
                    : ''
                "
                :zoom-rate="1.2"
                @click="priewshow(row)"
              />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="translate('图片')">
          <template #default="{ row }">
            <div>
              <el-image
                fit="contain"
                :initial-index="9"
                :preview-src-list="[row.Field2]"
                :preview-teleported="true"
                :src="row.Field2 + '?=' + timestamp"
                style="width: 60px; height: 60px"
                :z-index="99999"
                :zoom-rate="1.2"
              />
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          :label="translate('状态')"
          prop="Status"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div :class="row.SortCode == '0' ? 'color_l' : 'color_red'">
              {{ row.SortCode === 0 ? translate('在线') : translate('离线') }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('操作')" width="150">
          <template #default="{ row }">
            <!-- <el-button
              v-if="MenuAuths('edit')"
              link
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              修改
            </el-button> -->
            <el-button plain size="small" type="primary" @click="detailFn(row)">
              {{ translate('编辑') }}
            </el-button>
            <el-button plain size="small" type="primary" @click="sendproFn(row)">
              {{ translate('推送') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="title" :width="widthdialog" :close-on-click-modal="false">
      <detail
        v-if="detailType === 1"
        :form="form"
        @closetagfn="closetagFn"
        @uploadsuccess="uploadsuccess"
      />
      <setEslCode
        v-if="detailType === 2"
        :basestockdata="BaseStockData"
        :diolog="dialogVisible"
        @selectlist="selectlist1"
      />
      <exportdetail v-if="detailType === 3" :form="exportform" />
      <editdetail
        v-if="detailType === 4"
        :basestockdata="BaseStockData"
        :dialoginfo="dialogVisible"
        :form="editform"
      />
      <editItem
        v-if="detailType === 5 || detailType === 6"
        :basestockdata="BaseStockData"
        :dialoginfo="dialogVisible"
        :form="form"
        :detailtype="detailType" />
      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
    <priewImage v-if="showViewer" :form="priewlist" @close="closeFn" />
  </div>
</template>

<script>
  import {
    ESLInfoData,
    editfield2,
    editfield3,
    editbatchuuid,
    outESLStock,
    BaseStationData,
    CompanyData,
    saveESLInfo,
    savebinditem,
    sendpro,
    batchbindetcode,
    batchbinditem,
    batchrebootesl,
    batchbindbsid,
  } from '@/api/eslstock'
  import detail from './components/detail'
  import setEslCode from './components/setEslCode'
  import exportdetail from './components/exportdetail'
  import editdetail from './components/editdetail'
  import priewImage from './components/priewImage'
  import editItem from './components/editItem'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: { detail, setEslCode, exportdetail, editdetail, priewImage, editItem },
    data() {
      return {
        translate: translate,
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        detailType: 1, // 1是生成射频码弹框 2是设置条形码弹框
        widthdialog: '600px',
        title: translate('ESL库存'),
        Companylist: [],
        BaseStockData: [],
        BaseStockDatacopy: [],
        editform: {},
        showViewer: false,
        timestamp: new Date().getTime(),
        ItemList: [],
        uploadImg: '',
        SelectList:{
          arrList1: [],
          Bisi: '',
        },
        exportform: {
          comid: '',
          deptid: '',
          chiledData: [
            {
              ESLCode: '',
            },
          ],
        },
        form: {
          eslCodeNum: '',
          eslCodeOld: '',
          memo: '',
          version: '',
        },
        setform: {
          bsid: '',
          lcdtype: '00',
          isESLCode2: 0,
          editbatchuuid: '',
          chiledData: [
            {
              UUID: '',
              ESLCode: '',
              ESLCode2: '',
              eslCodeOld: '',
            },
          ],
        },
        formInfo: {
          ESLWSCode: '',
          BSID: '-1',
          ESLCode: '',
          UUID: '-1',
          LCDType: '-1',
          ESLCode2: '',
          VerNo: -1,
          PName: '',
        },
        StockData: [
          {
            label: translate('全部'),
            value: -1,
          },
          {
            label: translate('未出库'),
            value: 0,
          },
          {
            label: translate('已出库'),
            value: 1,
          },
        ],
        LCDData: [
          {
            label: translate('全部'),
            value: '-1',
          },
          {
             label: '300*400',
             value: '4.2',
          },
          {
             label: '296*128',
             value: '2.9',
          },
          {
             label: '250*128',
             value: '2.13',
          },
          {
             label: '480*800',
             value: '7.5',
          },
          {
             label: '296*152',
             value: '2.66',
          },
          {
             label: '152*152',
             value: '1.54',
          },
          {
             label: '480*648',
             value: '5.8',
          }
        ],
        VerNoData: [
          {
            label: translate('全部'),
            value: -1,
          },
          {
            label: '三代',
            value: 2,
          },
        ],
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
      this.CompanyData()
      this.BaseStationData()
    },
    methods: {
      selectlist1(val) {
        console.log(val)
        this.SelectList = val
      },
      closetagFn(data) {
        this.ItemList = data
      },
      uploadsuccess(img) {
        this.uploadImg = img
      },
      // 获取图片的宽高
      getImage(result) {
        return new Promise(function (resolve, reject) {
          const img = new Image()
          img.src = result
          img.onload = function () {
            //注意只有onload以后才可以拿到图片信息
            resolve({
              width: img.width,
              height: img.height,
            })
          }
        })
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      closeViewer() {
        this.showViewer = false
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      priewshow(row) {
        console.log('xx')
        this.priewlist = row
        this.showViewer = true
      },
      closeFn() {
        this.showViewer = false
      },
      lcdtypes(id) {
        switch (id) {
          case '4.2':
            return '300*400'
          case '2.9':
            return '296*128'
          case '2.13':
            return '250*122'
          case '2.66':
            return '296*152'
          case '1.54':
            return '152*152'
          case '5.8':
            return '480*648'
          case '7.5':
            return '480*800'
        }
      },
      async sendproFn(row) {
        const params = {
          eslid: row.ID,
        }
        const data = await sendpro(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: data.message,
          })
        }
      },
      batchFn() {
        if (this.ItemList.length <= 0) {
            this.$message({
              type: 'error',
              message: translate('请选择至少一个标签模板'),
            })
            return
          }

        this.$confirm('确认批量绑定物资重启?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.batchrebootesls()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      },
      addESLImg() {
        if (this.ItemList.length <= 0) {
            this.$message({
              type: 'error',
              message: translate('请选择至少一个标签模板'),
            })
            return
          }

        this.$confirm('确认推送选中的图片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.editfield3()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消推送',
            })
          })
      },
      async addESLcode(val) {
        if (val === '1') {
          this.widthdialog = '600px'
          this.title = translate('上传图片')
          if (this.ItemList.length <= 0) {
            this.$message({
              type: 'error',
              message: translate('请选择至少一个标签模板'),
            })
            return
          }
          this.detailType = 1
          this.form = this.ItemList
        } else if (val === '2') {
          this.widthdialog = '900px'
          this.title = translate('批量绑定(解绑)基站')
          this.detailType = 2
          this.setform = {
            bsid: '',
            lcdtype: '4.2',
            isESLCode2: 0,
            editbatchuuid: '',
            chiledData: [
              {
                UUID: '',
                ESLCode: '',
                ESLCode2: '',
                eslCodeOld: '',
              },
            ],
          }
        } else if (val === '3') {
          this.widthdialog = '600px'
          this.title = translate('ESL库存分配给商户')
          this.detailType = 3
          this.exportform = {
            comid: '',
            deptid: '',
            chiledData: [
              {
                ESLCode: '',
              },
            ],
          }
        }else if (val === '5') {
          this.widthdialog = '600px'
          this.title = translate('绑定物资')
          this.form = this.ItemList
          if (this.ItemList.length <= 0) {
            this.$message({
              type: 'error',
              message: translate('请选择至少一个标签模板'),
            })
            return
          }
          this.detailType = 5
        }else if (val === '6') {
          this.widthdialog = '600px'
          this.title = translate('绑定模板')
          this.form = this.ItemList
          if (this.ItemList.length <= 0) {
            this.$message({
              type: 'error',
              message: translate('请选择至少一个标签模板'),
            })
            return
          }
          this.detailType = 6
        }
        this.dialogVisible = true
      },
      detailFn(row) {
        console.log(row)
        this.widthdialog = '600px'
        this.title = translate('编辑')
        this.detailType = 4
        row.shopename = `[${row.PCode}]${row.PName}`
        this.editform = row
        this.dialogVisible = true
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'BSName',
              value: this.formInfo.BSName,
            },
            {
              name: 'BSID',
              value: this.formInfo.BSID === '-1' ? '' : this.formInfo.BSID,
              displayType: 'like',
            },
            {
              name: 'ESLCode',
              value: this.formInfo.ESLCode,
              displayType: 'like',
            },
            {
              name: 'VerNo',
              value: this.formInfo.VerNo === -1 ? '' : this.formInfo.VerNo,
              displayType: 'equal',
            },
            {
              name: 'LCDType',
              value:
                this.formInfo.LCDType === '-1' ? '' : this.formInfo.LCDType,
              displayType: 'like',
            },
            {
              name: 'UUID',
              value: this.formInfo.UUID === '-1' ? '' : this.formInfo.UUID,
              displayType: 'like',
            },
            {
              name: 'ESLCode2',
              value: this.formInfo.ESLCode2,
              displayType: 'like',
            },
          ]),
          export: false,
          value: this.formInfo.ESLWSCode,
          openid: this.formInfo.PName,
        }
        const data = await ESLInfoData(params)
        this.tableData = data?.data?.rows
        this.total = data?.data?.total
        console.log(this.tableData)
      },
      async BaseStationData() {
        const params = {
          pageNo: 1,
          pageSize: 20,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await BaseStationData(params)
        if (data.code === '200') {
          this.BaseStockData = data.data.rows
          const result = JSON.stringify(this.BaseStockData)
          const restem = JSON.parse(result)
          console.log(restem)
          this.BaseStockDatacopy = restem
          this.BaseStockDatacopy.unshift({
            BSID: '-1',
            BSName: '全部',
          })
        }
      },
      async CompanyData() {
        const params = {
          pageNo: 0,
          pageSize: 0,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await CompanyData(params)
        if (data.code === '200') {
          console.log(data)
          this.Companylist = data.data.rows
          this.Companylist.unshift({
            CompanyId: '-1',
            FullName: '全部',
          })
        }
      },
      async submit() {
        if (this.detailType === 1) {
          await this.editfield2()
          this.dialogVisible = false
        } else if (this.detailType === 2) {
          await this.batchbindbsids()
          this.dialogVisible = false
        } else if (this.detailType === 3) {
          if (this.exportform.chiledData) {
            let flag = true
            this.exportform.chiledData.map((item) => {
              if (!item.ESLCode) {
                flag = false
                this.$message({
                  type: 'error',
                  message: translate('请填写射频码'),
                })
                return
              }
            })
            if (flag) {
              await this.outESLStock()
            }
          }
        } else if (this.detailType === 4) {
          // this.saveESLInfo()
          this.saveESLInfo1()
        }else if (this.detailType === 5){
          this.batchbinditems()
          this.dialogVisible = false
        }else if(this.detailType === 6){
          this.batchbindetcodes()
          this.dialogVisible = false
        }
      },
      async batchbindbsids () {
        const arrlist = []
        if(this.SelectList.arrList1 && this.SelectList.arrList1.length>0) {
          this.SelectList.arrList1.map((item) => {
            if(item.checked) {
              arrlist.push(item.ESLCode)
            }
          })
        }
          const params = {
            bsid: this.SelectList.Bisi,
            liststr: arrlist.join(','),
          }
          const data = await batchbindbsid(params)
          if(data.code === '200') {
            this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
          }

      },
      async outESLStock() {
        const ESLarr = []
        if (
          this.exportform.chiledData &&
          this.exportform.chiledData.length > 0
        ) {
          this.exportform.chiledData.map((item) => {
            ESLarr.push(item.ESLCode)
          })
        }
        if (!this.exportform.comid) {
          this.$message({
            type: 'error',
            message: translate('请选择商户'),
          })
          return
        }
        const params = {
          liststr: ESLarr.join(','),
          comid: this.exportform.comid,
          deptid: this.exportform.deptid,
        }
        const data = await outESLStock(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
        this.dialogVisible = false
      },
      async batchbinditems() {
        console.log(this.form)
        const arrlist = []
        if (this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            arrlist.push(item.ESLCode)
          })
        }
        const params = {
          liststr: arrlist.join(','),
          bsid: this.form.PCode
        }
        const data = await batchbinditem(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
      },
      async batchbindetcodes() {
        console.log(this.form)
        const arrlist = []
        if (this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            arrlist.push(item.ESLCode)
          })
        }
        const params = {
          liststr: arrlist.join(','),
          eslTypeID: this.form.ESLTypeID
        }
        const data = await batchbindetcode(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
      },
      async editbatchuuid() {
        const params = {
          list: this.setform.chiledData,
          bsid: this.setform.bsid,
          bsname: this.setform.bsname,
          lcdtypeid: this.setform.lcdtype,
          verno: this.setform.isESLCode2,
        }
        const data = await editbatchuuid(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
      },
      async editfield2() {
        const arrlist = []
        if (this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            arrlist.push({
              id: item.ID,
              field2: this.uploadImg,
            })
          })
        }
        const params = {
          list: arrlist,
        }
        const data = await editfield2(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('上传成功'),
          })
        }
      },
      async batchrebootesls() {
        const arrlist = []
        if (this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            arrlist.push({
              bsid: item.BSID,
              eslCode: item.ESLCode,
              eslCodeOld: item.ESLCodeOld,
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: translate('请至少选择一个推送的标签'),
          })
          return
        }
        const params = arrlist
        const data = await batchrebootesl(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('推送成功'),
          })
        }
      },
      async editfield3() {
        const arrlist = []
        if (this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            arrlist.push({
              id: item.ID,
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: translate('请至少选择一个推送的标签'),
          })
          return
        }
        const params = {
          list: arrlist,
        }
        const data = await editfield3(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('推送成功'),
          })
        }
      },
      async saveESLInfo() {
        const params = this.editform
        console.log(this.editform)
        const data = await saveESLInfo(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
          this.dialogVisible = false
          this.getList()
        }
      },
      async saveESLInfo1() {
        const params = this.editform
        console.log(this.editform)
        const data = await savebinditem(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
          this.dialogVisible = false
          this.getList()
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      display: inline-block;
      width: 100px;
      color: #494949;
      text-align: end;
    }
    .color_l {
      color: #42d885;
    }
    .color_red {
      color: red;
    }

    .w164 {
      width: 164px;
    }
    .w130 {
      display: block;
      width: 130px;
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .mr14 {
      margin-right: 14px;
    }
    .add-box {
      display: inline-block;
      // width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #999;
      border-radius: 3px;
      cursor: pointer;
      padding: 0 10px;
    }
    // .add-box3 {
    //   width: 60px;
    // }
    .pdb10 {
      padding-bottom: 10px;
    }
  }
  .el-table {
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>
